<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>百度搜索提示词</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f9f9f9;
            margin: 0;
            padding: 20px;
            display: flex;
            flex-direction: column;
            align-items: center;
            height: 100vh;

        }

        .logo {
            text-align: center;
            margin-bottom: 20px;
        }

        .logo img {
            width: 300px;
        }

        #search-container {
            display: flex;
            align-items: center;
        }

        #inp {
            flex: 1;
            max-width: 600px;

            padding: 10px;
            font-size: 16px;
            border: 1px solid #ccc;
            border-radius: 4px 0px 0px 4px;
            box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
            transition: border-color0.2s;
        }

        #inp:focus {
            border-color: #007bff;
            outline: none;
        }

        #search-btn {
            padding: 10px 20px;
            font-size: 16px;
            color: white;
            background-color: #007bff;
            border: none;
            border-radius: 0px 4px 4px 0px;
            cursor: pointer;
        }

        #search-btn:hover {
            background-color: #0056b3;
        }

        #box {
            margin-top: 10px;
            background-color: #fff;
            border: 1px solid #ddd;
            border-radius: 4px;
            max-height: 300px;
            overflow-y: auto;
            box-shadow: 2px 5px rgba(0, 0, 0, 0.1);
            display: none;
        }

        #box p {
            padding: 10px;
            margin: 0;
            cursor: pointer;
            transition: 0.2s;
        }

        #box p:hover {
            background-color: #f0f0f0;
        }
    </style>
</head>

<body>
    <div class="logo">
        <img src="./img/baidu.png" alt="Logo">
    </div>
    <div id="search-container">
        <input type="text" id="inp" placeholder="输入搜索词...">
        <button id="search-btn" onclick="performSearch()">搜索</button>
    </div>
    <div id="box"></div>

    <script>
        let inp = document.getElementById('inp');
        let box = document.getElementById('box');

        inp.oninput = function () {
            box.innerHTML = '';
            let query = inp.value;
            let xhr = new XMLHttpRequest();
            xhr.open('GET', 'https://www.baidu.com/sugrec?ie=utf-8&prod=pc&wd=' + encodeURIComponent(query), true);
            xhr.send(null);
            if (query !== '') {
                xhr.onload = function () {
                    let res = JSON.parse(xhr.response);
                    if (res.g && res.g.length > 0) {
                        box.style.display = 'block';
                        for (let i = 0; i < res.g.length; i++) {
                            let p = document.createElement('p');
                            p.innerText = res.g[i].q;
                            p.onclick = function () {
                                inp.value = res.g[i].q;
                                box.innerHTML = '';
                                box.style.display = 'none';
                            };
                            box.appendChild(p);
                        }
                    } else {
                        box.style.display = 'none';
                    }
                }
            } else {
                box.style.display = 'none';
            }
        }

        function performSearch() {
            let query = inp.value;
            if (query.trim()) {
                window.open('https://www.baidu.com/s?wd=' + encodeURIComponent(query), '_blank');
            }
        } </script>
</body>

</html>